<template>
  <el-dialog title="耗卡记录" width="70%" :before-close="dialogClose" :visible.sync="show">
      <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        row-key="id" border lazy :load="load" id="exportTable">
      <el-table-column prop="username" label="会员姓名" align="center"></el-table-column>
      <el-table-column prop="card_name" label="项目名称" align="center"></el-table-column>
      <el-table-column prop="date" label="消耗日期" align="center"></el-table-column>
      <el-table-column prop="stime" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="etime" label="结束时间" align="center"></el-table-column>
      <el-table-column prop="fee" label="手工费" align="center"></el-table-column>
      <el-table-column prop="realname" label="美容师" align="center"></el-table-column>
      <el-table-column prop="star" label="服务评价" align="center"></el-table-column>
    </el-table>
    <el-pagination
      class="fen"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :page-sizes="[5, 10, 20, 50]"      
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length">
      </el-pagination>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'markSonShow',
  props:['show','list'],
  data() {
    return {
        currentPage:1, //初始页
        pagesize:10, //每页的数据
        show_page:true,
        nowpage:1,
        maxpage:10
    }
  },
  created: function(){
    
  },
  methods: {
    dialogClose:function(){
      this.$emit("func",{'key':'markSon'})
    },
    handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
    },
    changeLeft($event){
        $event.currentTarget.className="active";
    },
    removeLeft($event){
        $event.currentTarget.className ="tdclass";
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    }
  }
}
</script>
<style>

</style>